<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js"></script>
</head>
<body>

    <div id="tb" >
        id:<input class="easyui-numberbox" id="search-id" />
        书名:<input class="easyui-textbox" id="search-name" />
        分类:<input class="easyui-combobox" style="width:100px;" id="search-category" url="category.json" method="get" valueField="id" textField="name" />
        <a class="easyui-linkbutton" id="search_btn" >搜索</a>
    </div>

    <table id="dg" style="width:700px;height:500px;" >

    </table>
    <script>
        $(function(){

            $('#dg').datagrid({
                title: "图书列表",
                url: "book_list.json",
                method: "get",
                toolbar:'#tb',
                pagination:true, //显示分页栏
                pageNumber:1,
                idField:'id',
                rownumbers: true,
                pageSize:10,
                pageList:[5,10,15,20,30],
                frozenColumns:[[{ field:'id',title:'ID',width:50,align:'center' }]], //在有横向滚动条的时候,冻结id这列,此列会被冻结在左边.注意表格列宽度不要设置成百分比,否则看不到效果
                queryParams:{
                    "id":1,
                    "name":"haha",
                    "category.id":3
                },
                columns:[[
                    // {field:'id',title:'ID',width:50,align:'center'},
                    {field:'name',title:'书名',width:200},
                    {
                        field:'cover',title:'图片',width:150,
                        formatter:function(value,row,index){
                            return '<img src="'+value+'" width="150" height="150" />';
                        }
                    },
                    {field:'publishDate',title:'出版日期',width:100},
                    {field:'price',title:'价格',width:100},
                    {field:'category',title:'分类',width:100,formatter:function(value,row,index){
                        return row.category.name;
                    }}
                ]],
                //冻结行:在表格加载完成后设置冻结的行,freezeRow设置冻结行的索引,从0开始
                onLoadSuccess:function(){
                    $(this).datagrid('freezeRow',0);//冻结第一行
                }
            });



            $('#search_btn').click(function(){
                
                //console.log($("#dg").datagrid("options"));

                //先取到原来的查询条件
                var queryParams=$("#dg").datagrid("options").queryParams;
                //console.log(queryParams);

                queryParams.id=$('#search-id').numberbox("getValue");
                queryParams.name=$('#search-name').textbox("getValue");
                queryParams["category.id"]=$("#search-category").combobox("getValue");

                $('#dg').datagrid('load');

            });

            
        });
    </script>
</body>
</html>